<template>
  <div class="navbar boxShadow">
    <mu-flex justify-content="start">
      <mu-flex justify-content="start" align-self="center" style="width:199px;height:55px;background:#37386e">
        <!-- <span class="titleName" style="margin-left: 50px;margin-top: 10px; cursor:pointer; color: #E62B39;" @click="routerPush">XIHARI</span> -->
        <img class="logo" src="../../assets/image/logo.png" alt="" style="cursor:pointer;" @click="routerPush">
      </mu-flex>
      <mu-flex justify-content="start" fill align-self="center">
        <span class="titleName">中压开关设备绝缘型式试验智能化控制系统</span>
      </mu-flex>
      <mu-flex justify-content="end" fill align-items="center">
        <div class="nav-user">
          <mu-menu placement="bottom" open-on-hover>
            <span>
              <span class="iconfont icon-yonghu"></span>
              <span class="yh">{{fullname}}</span>
            </span>
            <mu-list slot="content">
              <mu-list-item button @click="passwordDialog.visible=true">
                <mu-list-item-title>修改密码</mu-list-item-title>
              </mu-list-item>
              <mu-list-item button @click="logout()">
                <mu-list-item-title>退出登录</mu-list-item-title>
              </mu-list-item>
            </mu-list>
          </mu-menu>
          </div>
      </mu-flex>
    </mu-flex>
    <mu-flex justify-content="start" align-self="left" style="width:210px;">
      <el-menu unique-opened :collapse-transition="false" :style="height" :collapse="isCollapse" :default-active="active1" class="el-menu-vertical-demo" @select="handleSelect"
            background-color="#37386e" text-color="#7b7b9a" active-text-color="#e6e6fa">
            <el-submenu v-for="(item,index) in newMenu" :key="index" :index="''+item.menu_id">
              <template slot="title">
                <i :class="item.menu_icon"></i>
                <span>{{item.menu_name}}</span>
              </template>
              <el-menu-item-group v-for="(item1,index1) in item.children" :key="index1">
              <el-menu-item :index="''+item1.menu_id">{{item1.menu_name}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
      </el-menu>
    </mu-flex>
    <!--------------------修改密码-------------------------->
    <el-dialog title="修改密码" :visible.sync="passwordDialog.visible" :modal-append-to-body="false" @close="qxDlg">
      <mu-form ref="form" :model="passwordDialog.password">
        <mu-row gutter>
          <mu-col span="4" sm="12" lg="4">
            <mu-form-item label="原始密码" prop="oldPass" :rules="oldPass">
                <mu-text-field type="password" v-model="passwordDialog.password.oldPass"></mu-text-field>
            </mu-form-item>
          </mu-col>
          <mu-col span="4" sm="12" lg="4">
            <mu-form-item label="新密码" prop="newPass1" :rules="passwordRules">
                <mu-text-field type="password" v-model="passwordDialog.password.newPass1"></mu-text-field>
            </mu-form-item>
          </mu-col>
          <mu-col span="4" sm="12" lg="4">
            <mu-form-item label="重复新密码" prop="newPass2" :rules="confirm_password">
                <mu-text-field type="password" v-model="passwordDialog.password.newPass2"></mu-text-field>
            </mu-form-item>
          </mu-col>
        </mu-row>
      </mu-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="textBtn" @click="qxDlg" size="medium">取 消</el-button>
        <el-button type="primary" @click="submit()" size="medium">确定</el-button>
      </span>
    </el-dialog>
  </div>

</template>
<script>
import Bus from '../../public/eventBus'
export default {
    data() {
        return {
            newMenu:[],
            isCollapse: false,
            active1: '0',
            fullname: '',
            height: 'height: 1000px',
            role_id: 7,
            passwordDialog: {
                visible: false,
                password: {
                    oldPass: '',
                    newPass1: '',
                    newPass2: ''
                }
            },
            oldPass: [      //旧密码验证
                { validate: (val) => !!val, message: '请输入原始密码' },
                { validate: (val) => val.length >= 6 && val.length <= 16, message: '密码长度6到16位' }
            ],
            passwordRules: [    //新密码验证
                { validate: (val) => !!val, message: '请输入新密码' },
                { validate: (val) => /^[a-zA-Z0-9]{6,16}$/.test(val) === true, message: '密码为6-16位数字或字母' },
                { validate: (val) => val !== this.passwordDialog.password.oldPass, message: '新密码与原始密码一致' }
            ],
            confirm_password: [ //重复新密码验证
                { validate: (val) => !!val, message: '请再次输入新密码' },
                { validate: (val) => /^[a-zA-Z0-9]{6,16}$/.test(val) === true, message: '密码为6-16位数字或字母' },
                { validate: (val) => val === this.passwordDialog.password.newPass1, message: '两次新密码不一致' },
                { validate: (val) => val !== this.passwordDialog.password.oldPass, message: '新密码与原始密码一致' }
            ],
        };
    },
    methods: {
      qxDlg() {
        this.passwordDialog.password.oldPass = ''
        this.passwordDialog.password.newPass1 = ''
        this.passwordDialog.password.newPass2 = ''
        this.passwordDialog.visible = false
        this.$refs.form.clear()
      },
      routerPush() {
        console.log(123);
        this.active1 = '0'
        sessionStorage.setItem('active', '0');
        this.$router.push('/HomePage')
      },
      handleSelect(key) {
        // console.log(key);
        this.active1 = key
        let url;
        this.newMenu.forEach(item => {
          item.children.forEach(item1 => {
            if(item1.menu_id == key) {
              url = item1.menu_path
            }
          })
        })
        // console.log(url);
        this.$emit('activeMenu', url);
        sessionStorage.setItem('active', key);
      },
        logout() {  //退出登录
            this.$router.push({ path: '/' });
            sessionStorage.removeItem('active');
        },
        submit() {  //提交修改密码
          this.$refs.form.validate().then((result) => {
            if (result) {
                let { oldPass: old_password, newPass1: new_password } = this.passwordDialog.password;
                let user_id=JSON.parse(sessionStorage.getItem('userInfo')).user_id;
                const update = { user_id,old_password, new_password };
                this.$http.put('/user/password', update)
                    .then(response => {
                        this.passwordDialog.visible = false;
                        this.$message.success(response.message);
                        this.passwordDialog.password.oldPass='';
                        this.passwordDialog.password.newPass1='';
                        this.passwordDialog.password.newPass2='';
                        this.$router.push('/')
                    });
            }
          });
        },
        async getMenuS() {
          const role_id = JSON.parse(sessionStorage.getItem('userInfo')).role_id;
          if(role_id.length){
            const res = await this.$http.get(`/menuResources?role_id=${role_id}`);
            // res.result.forEach((item1) => {
              this.newMenu = []
              res.result.forEach((item,index) => {
                if(item.children.length !== 0){
                  // return res.result.splice(index,1)
                console.log('itemitem',item);
                  this.newMenu.push(item)
                }
              });
            // });
            // this.newMenu = res.result
          }else{
            // const res = await this.$http.get(`/menuResourcess`);
            // this.newMenu = res.result
            this.newMenu = []
          }
        },
        setHeight() {
          this.height = 'height: 1000px'
        },
        getHeight() {
          // console.log(123);
          setTimeout(() => {this.height ='height:' + (document.body.scrollHeight-55) + 'px';})
          // this.height = px
        },
    },
    created() {
      this.getMenuS()
    },
    mounted() {
      // this.getHeight()
      Bus.$on('sendBus',data=>{
        this.active1 = ''+data
        this.getMenuS()
      })
      Bus.$on('getMenu',() => this.getMenuS())
      Bus.$on('setHeight', () => this.setHeight())
      Bus.$on('getHeight', () => this.getHeight())
      Bus.$on('setActive', (val) => {this.active1 = val})
        if (sessionStorage.getItem('active')) {     //页面刷新后菜单焦点恢复
            this.active1 = sessionStorage.getItem('active');
        }
        if (sessionStorage.getItem('userInfo')) {     //页面刷新后菜单焦点恢复
            this.fullname = JSON.parse(sessionStorage.getItem('userInfo')).nickname;
        }
    }
};
</script>
<style lang="scss" scoped>
@import "../../assets/css/element-variables.scss";
@import "../../assets/css/common.scss";
@import "../../public/fonts/iconfont.css";
.navbar {
  // margin-left: 150px;
  position: relative;
  @include size(100%, 50px);
  background: #FFFFFF;//$MAIN_BLUE_COLOR;
  // margin-left: 12%;
  color: $WHITE_COLOR;
  * {
    @media (max-width: 768px) {
      font-size: 14;
    }
    font-size: 14;
  }
  img {
    max-width: 100%;
    margin-left: 26px;
  }
  .titleName{
      margin-left: 26px;
      font-size: 24px;
      color: #6565e6;
  }
  .nav-user {
    line-height: 50px;
    padding-right: 26px;
    color:#2B2B2F;
    .iconfont {
      @media (max-width: 768px) {
        font-size: $FONT_SIZE;
      }
      font-size: $FONT_SIZE + 2;
    }
  }
  .el-dialog {
    border-radius: 6px;
    .el-dialog__body {
      padding: 30px 40px;
      .col {
        padding-right: 20px;
        .mu-input {
          margin-bottom: 0;
          padding-bottom: 0;
          width: 100%;
        }
      }
    }
    .el-dialog__footer {
      padding: 10 40px;
      .mu-raised-button {
        box-shadow: none;
        border: $BORDER_COLOR 1px solid;
        margin-left: 15px;
      }
    }
  }
}
.mu-popover {
  box-shadow: 0px 6px 15px rgba(1, 68, 208, 0.12) !important;
  transform: translateX(-10px);
}
.mu-item-wrapper.hover {
  background-color: $BG_GRAY;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
.el-menu.el-menu--horizontal{
  border-bottom: none !important;
}
/* 导航栏的间距等样式 */
.el-menu-item {
  padding: 0 62px !important;
  font-size: 14px !important;
  margin-top: 1.4% !important;
  height: 35px !important;
  line-height: 35px !important;
}
/* 点击出来的下划线进行隐藏 */
.el-menu-item.is-active {
  border-bottom-color: #FDFD8B !important;
}
//设置鼠标悬停时el-menu-item的样式
.el-menu-item:hover{
  background-color: #333365 !important;//#2B2B2F !important;
  // background-color: rgba(43, 43, 47, 0) !important;//#2B2B2F !important;
  color: #e6e6fa !important;
  border-left: 3px solid #7779ee;
  // color: #FFFFFF !important;
}
.el-menu-item{
  border-left: 3px solid #37386e;
}
.el-submenu{
  overflow: hidden;
}

.el-submenu__title span {
  color: #e6e6fa;
}
.iconfont {
  color: #e6e6fa !important;
}
.icon-yonghu {
    padding: 5px;
    margin-right: 3px;
    background: #A0A3E6;
    border-radius: 50%;
    color: #FFFFFE !important;
}
.logo{
  margin-left: 14px !important;
    margin-top: 10px !important;
    width: 160px !important;
}
.el-menu-item.is-active {
  background-color: #333365 !important;
  border-left: 3px solid #7779ee !important;
}
.mu-form-item__focus {
  color: #6565e6;
}

.mu-form-item__error {
    color: #0000008a;
}

</style>
